<script type="text/javascript" src="{:U(MODULE_NAME. '/Public/editor',array('path'=>'message','type'=>2,'width'=>650))}"></script>
<style>
table{width:192px;overflow:hidden}
#control,#control table,#control table td{ font-size:12px; border-bottom: 1px #dbe9f1 solid;}
#control{ width:192px; background-color:#f1f8fc; font-size:12px; font-color:#333333; text-align:center; height:30px;}
#control table{ width:192px; height:30px; overflow:hidden}
ul{ margin: 0px;}
#control table li{ list-style:none;height:30px;line-height:30px; overflow:hidden; padding-left: 8px;}
#control table .tabTit{background:#f1f8fc;}
#control a { font-weight:normal; font-size:16px; color:#333333; text-decoration:none; padding-right:15px;}
#control .testLink{ font-weight:bold; font-size:12px}
.test{ width:192px;/*background-color:#f6f6f6;*/overflow:hidden; }
.test li{ list-style:none; color:#000; font-size:13px; line-height:25px;}
#control table,.test table{ margin:0 auto; text-align:center}
.test{border-bottom: 1px #dbe9f1 solid; }
.STYLE1 {
	font-size: 8px;
	color: #fff;
}
</style>
<div style="float:left;width:800px;">
    <div class="form">
    <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME. '/Message/sent')}">
      <dl>
        <dt> 收件人：</dt>
        <dd>
          <input type="text" name="receiveID" id="receiveID"  style="width:500px;"/> <span class="error">*</span>
        </dd>
      </dl>
      <dl>
        <dt>主题：</dt>
        <dd>
          <input type="text" name="title" id="title" style="width:500px;" /><span class="error">*</span>
        </dd>
      </dl>
          <dl>
        <dt> 正文：</dt>
        <dd>
          <textarea name="content" id="content"></textarea>
        </dd>
      </dl>
      <div class="form_b" style="margin-left: 110px;">
        <input type="submit" class="button-green" id="submit" value="发送">
        <input type="button" onclick="goBack()" class="button-return" value="返回" />
      </div>
    </form>
    </div>
</div>
<div style="float:left;padding-left:10px;">
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" style="background-color:#2f75b1; height:34px; line-height:34px; font-size:16px; color:#fff; font-weight:bold;">通讯录</td>
</tr>
</table>
    <volist name="gourpList" id="gl">
    <div id="control">
      <table width="100%"  border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="100%" align="center" class="tabTit" onClick="Effect('test{$gl.id}');" ><li id="test{$gl.id}tab" style="float:left"><a href="#" >+</a> </li><li style="float:left"><a href="#" class="testLink">{$gl.title}</a> </li></td>
        </tr>
      </table>
    </div>
    <div id="test{$gl.id}" class="test" style="display:none;">
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
        <tr>
          <td align="left" valign="top"><ul>
          <volist name="gl['i']" id="gli">
          <li onClick="getUserName('{$gli.userName}')" style="cursor:pointer;">{$gli.userName}</li>
          </volist>
          </ul></td>
        </tr>
      </table>
    </div>
    </volist>
</div>
<script>
/*

使用方法
调用效果: Effect(1);
  其中1为: 被改变对象的id
注意给对象ID的时候一定不要重复.

*/

function getUserName(userName)
{
	inputValue = $("#receiveID").val();
	userName = userName+';';
	
	if(inputValue.indexOf(userName) == -1)
	{
		$("#receiveID").val(inputValue+userName);
	}
};
	
function $G(Read_Id) { return document.getElementById(Read_Id) }

var openedObjId=null
function Effect(ObjectId){
	if (openedObjId){
		$G(openedObjId+"tab").innerHTML = "<a href=# >+</a>";
		Start(openedObjId,'Close');
	}
	if(openedObjId!=ObjectId){
		$G(ObjectId+"tab").innerHTML = "&nbsp;&nbsp;<a href=#>-</a>";
		Start(ObjectId,'Opens');
		openedObjId=ObjectId
	}
	else openedObjId=null
}
function Start(ObjId,method){
var BoxHeight = $G(ObjId).offsetHeight;   			//获取对象高度
var MinHeight = 5;									//定义对象最小高度
var MaxHeight = 130;					 			//定义对象最大高度
var BoxAddMax = 1;									//递增量初始值
var Every_Add = 0.15;								//每次的递(减)增量  [数值越大速度越快]
var Reduce    = (BoxAddMax - Every_Add);
var Add       = (BoxAddMax + Every_Add);
//关闭动作**************************************
if (method == "Close"){
var Alter_Close = function(){						//构建一个虚拟的[递减]循环
	BoxAddMax /= Reduce;
	BoxHeight -= BoxAddMax;
	if (BoxHeight <= MinHeight){
		$G(ObjId).style.display = "none";
		window.clearInterval(BoxAction);
	}
	else $G(ObjId).style.height = BoxHeight;
}
var BoxAction = window.setInterval(Alter_Close,1);
}
//打开动作**************************************
else if (method == "Opens"){
var Alter_Opens = function(){
	BoxAddMax *= Add;
	BoxHeight += BoxAddMax;
	if (BoxHeight >= MaxHeight){
		$G(ObjId).style.height = MaxHeight;
		window.clearInterval(BoxAction);
	}else{
	$G(ObjId).style.display= "block";
	$G(ObjId).style.height = BoxHeight;
	}
}
var BoxAction = window.setInterval(Alter_Opens,1);
}
}
Effect('test1');
</script>